<template>
  <ul>
      <li v-for="(value, key, index) in object">
          {{ index }}. {{ key }}: {{ value }}
      </li>
  </ul>
</template>


<script>
    export default {
        data () {
            return {
                object: {
                    name: 'lifecycle'
                }
            }
        },
        beforeCreate: function(){
            console.log('beforeCreate');
            console.log(this);
            // this.object.beforeCreate = 'beforeCreate';
        },
        created: function(){
            console.log('created');
            console.log(this);
            this.object.lifecycle = 'created';
            this.object.name = '更名了';
            this.$forceUpdate();
        },
        beforeUpdate: function(){
            console.log('beforeUpdate');
            console.log(this);
            this.object.lifecycle = 'beforeUpdate';
        },
        updated: function(){
            console.log('updated');
            console.log(this);
            this.object.lifecycle = 'updated';
            this.$destory();
        },
        beforeDestroy: function(){
            console.log('beforeDestroy');
            console.log('清除之前露个脸');
            console.log(this);
            this.object.lifecycle = 'beforeDestroy';
        },
        destroyed: function(){
            console.log('destroyed');
            console.log(this);
            // this.object.lifecycle = 'destroyed';
        }
    }
</script>